<template>
<el-card  shadow="always" style="width: 95%;">
<!--  1. 查询条件表单-->
    <el-form :inline="true" :model="studentVo" class="demo-form-inline" size="medium">
        {{studentVo}}
        <el-form-item >
            <el-input v-model="studentVo.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item >
            <el-input v-model="studentVo.addr" placeholder="学生地址"></el-input>
        </el-form-item>
        <el-form-item>
            <el-select v-model="studentVo.cid" placeholder="所在班级">
                <el-option label="所有班级" value="0"></el-option>
                <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search" icon="el-icon-search" plain>查询</el-button>
        </el-form-item>
    </el-form>
<!--  2. 数据的展示-->
  <el-table
          :data="students"
          style="width: 100%">
    <el-table-column
            label="学号"
            prop="sid"
            align="center"
            width="180">
    </el-table-column>
    <el-table-column
            label="姓名"
            prop="sname"
            align="center">
    </el-table-column>
    <el-table-column
            label="性别"
            prop="sex"
            align="center">
    </el-table-column>
    <el-table-column
            label="年龄"
            prop="age"
            align="center">
    </el-table-column>
    <el-table-column
            label="住址"
            prop="addr"
            align="center">
    </el-table-column>
    <el-table-column
            label="班级编号"
            prop="cid"
            align="center">
    </el-table-column>

    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  3. 分页栏-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
</el-card>

</template>

<script>
  export default {
    data() {
      return {
        students: [],
        page:1,       // 当前页
        pageSize:5,   // 每页大小
        total: 100,   // 总记录数
        classes:[],     // 所有班级集合
        studentVo:{},   // 封装查询条件对象
      }
    },
    created() {
      this.search()
      this.findClasses()
    },
    methods: {
      //1. 查询所有班级
      findClasses(){
          this.$axios.get("/classes").then(({data}) => {
              this.classes = data.data
          })
      } ,
      //2. 条件查询带分页
      search(){
            this.$axios.post(`/student?cmd=search&page=${this.page}&pageSize=${this.pageSize}`,this.studentVo).then(({data}) => {
                console.log("data:",data)
                this.students = data.data.rows
                this.total = data.data.total
            })
      },
      // pageSize: 每页大小改变时触发
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.search()
      },
      // page: 当前页大小改变时触发
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        this.search()
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>
<style>
  .el-pagination{
    text-align: right;
    margin-top: 20px;
  }
  .el-card{
      margin: 0 auto;
  }
</style>
